<script setup>
import { reactive, computed, watch } from 'vue'
const state = reactive({
  // list: JSON.parse(localStorage.getItem('@_@') || '[]'),
  list: JSON.parse(localStorage.getItem('@_@')) || [],
  todoName: '',
  // #1 准备数据
  tabs: ['all', 'active', 'completed'],
  // #3 准备一个控制高亮的变量和循环时候的 item 进行比较，一样就应用高亮的 class
  active: localStorage.getItem('ACTIVE') || 'all',
})

const handleDel = (id) => (state.list = state.list.filter((item) => item.id !== id))

const handleAdd = () => {
  if (state.todoName.trim().length === 0) return alert('不能为空')
  const item = {
    id: Date.now(),
    name: state.todoName,
    doned: false,
  }
  state.list.unshift(item)
  state.todoName = ''
}

// 剩余数量
const leftCount = computed(() => state.list.filter((item) => !item.doned).length)
// 是否展示底部栏
const isShowFooter = computed(() => !(state.list.length === 0))
// 存在一个已完成的就显示，就返回 true
const isShowClear = computed(() => state.list.some((item) => item.doned))
// 清空已完成
const clearComputed = () => (state.list = state.list.filter((item) => !item.doned))

// 确定全选按钮的状态
const isAll = computed({
  get() {
    return state.list.every((item) => item.doned)
  },
  set(newValue) {
    // 把全选按钮修改后的状态应用于每一个单选
    state.list.forEach((item) => (item.doned = newValue))
  },
})

// #4 根据 state.active 计算出要渲染的新数据
const renderList = computed(() => {
  if (state.active === 'active') {
    return state.list.filter((item) => !item.doned)
  } else if (state.active === 'completed') {
    return state.list.filter((item) => item.doned)
  }
  return state.list
  // return state.active === 'active' ? state.list.filter((item) => !item.doned) : state.active === 'completed' ? state.list.filter((item) => item.doned) : state.list
})

// 监听 state.list 这个 reactive 【内部数据】的变化
/* watch(state.list, (newValue) => {
  localStorage.setItem('@_@', JSON.stringify(newValue))
}) */
watch(
  () => state.list, // 这样写只能监听到对 state.list 本身的修改
  (newValue) => {
    localStorage.setItem('@_@', JSON.stringify(newValue))
  },
  {
    deep: true, // 这样能监听到对 state.list 内部数据的修改
  }
)

watch(
  () => state.active,
  (newActive) => {
    localStorage.setItem('ACTIVE', newActive)
  }
)
</script>
<template>
  <section class="todoapp">
    <header class="header">
      <h1>todos</h1>
      <input class="new-todo" placeholder="What needs to be done?" autofocus v-model="state.todoName" @keyup.enter="handleAdd" />
    </header>

    <section class="main">
      <input id="toggle-all" class="toggle-all" type="checkbox" v-model="isAll" />
      <label for="toggle-all">Mark all as complete</label>
      <ul class="todo-list">
        <!-- 有 completed 就划线 -->
        <li
          :class="{
            // 右边为 true，就是用左边的 class
            completed: item.doned,
          }"
          v-for="item in renderList"
          :key="item.id"
        >
          <div class="view">
            <!-- v-model 对应的值是 true，就会自动打钩，内部会把 checked 变为 true -->
            <input class="toggle" type="checkbox" v-model="item.doned" />
            <label>{{ item.name }}</label>
            <button class="destroy" @click="handleDel(item.id)"></button>
          </div>
          <input class="edit" value="Create a TodoMVC template" />
        </li>
      </ul>
    </section>

    <footer class="footer" v-if="isShowFooter">
      <span class="todo-count"
        ><strong>{{ leftCount }}</strong> item left</span
      >
      <ul class="filters">
        <!-- #2 循环数据 -->
        <li v-for="item in state.tabs" :key="item" @click="state.active = item">
          <a
            :class="{
              selected: state.active === item,
            }"
            href="#/"
            >{{ item.slice(0, 1).toUpperCase() + item.slice(1) }}</a
          >
        </li>
      </ul>
      <button class="clear-completed" v-if="isShowClear" @click="clearComputed">Clear completed</button>
    </footer>
  </section>
</template>
